<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目列表</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 容器样式 */
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .container .navbar {
            width: 100%;
            height: 50px;
            background: linear-gradient(to right, #2c3e50, #34495e);
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .container .navbar a {
            display: inline-block;
            width: 80px;
            color: white;
            font-size: 16px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
            transition: background-color 0.3s;
        }

        .container .navbar a:hover {
            background-color: #27ae60;
        }

        .container .navbar .login {
            float: right;
        }

        /* 题目列表样式 */
        .container .question_list {
            padding-top: 50px;
            width: 800px;
            margin: 0 auto;
            text-align: center;
            flex: 1;
        }

        .container .question_list h1 {
            color: #27ae60;
            margin-bottom: 20px;
            font-size: 32px;
        }

        /* 搜索栏样式 */
        .search-bar {
            margin: 20px 0;
            text-align: center;
        }

        .search-bar input {
            padding: 10px 15px;
            width: 300px;
            border: 1px solid #27ae60;
            border-radius: 5px;
            font-size: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .search-bar button {
            padding: 10px 20px;
            background: linear-gradient(to right, #27ae60, #2ecc71);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .search-bar button:hover {
            background: linear-gradient(to right, #2ecc71, #27ae60);
        }

        /* 表格样式 */
        .container .question_list table {
            width: 100%;
            font-size: 16px;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .container .question_list table th,
        .container .question_list table td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
        }

        .container .question_list table th {
            background-color: #f4f4f4;
            text-align: left;
        }

        .container .question_list table .item a {
            text-decoration: none;
            color: #3498db;
            transition: color 0.3s;
        }

        .container .question_list table .item a:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        /* 页脚样式 */
        .container .footer {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #999;
            border-top: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏， 功能不实现-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a class="login" id="logoutLink" href="/logout" style="display: none;">退出</a>
            <a class="login" id="loginLink" href="/login">登录</a>
            <a href="/user/submissions">我的提交</a>
            <script>
                // 公共检查函数（需在所有页面加载）
                function checkLogin() {
                    const loginLinks = document.querySelectorAll('#loginLink');
                    const logoutLinks = document.querySelectorAll('#logoutLink');

                    const isLoggedIn = document.cookie
                        .split(';')
                        .some(cookie => {
                            const [name, value] = cookie.trim().split('=');
                            return name === 'user_id' &&
                                value &&
                                value !== "undefined" &&
                                value !== "null";
                        });

                    loginLinks.forEach(link =>
                        link.style.display = isLoggedIn ? 'none' : 'block');
                    logoutLinks.forEach(link =>
                        link.style.display = isLoggedIn ? 'block' : 'none');
                }

                // 页面加载完成后执行
                document.addEventListener('DOMContentLoaded', checkLogin);

                // 定期检查登录状态（每5秒）
                setInterval(checkLogin, 5000);
            </script>
        </div>
        <div class="question_list">
            <h1>OnlineJuge题目列表</h1>
            <div class="search-bar">
                <input type="text" id="searchKeyword" placeholder="输入题目标题关键词">
                <button onclick="performSearch()">搜索</button>
            </div>
            <table>
                <tr>
                    <th class="item">编号</th>
                    <th class="item">标题</th>
                    <th class="item">难度</th>
                    <th class="item">CPU限制</th>
                    <th class="item">内存限制</th>
                </tr>
                {{#question_list}}
                <tr class="item">
                    <td>{{number}}</td>
                    <td><a href="/question/{{number}}">{{title}}</a></td>
                    <td><span class="badge bg-{{star_color}}">{{star}}</span></td>
                    <td>{{cpu_limit}} ms</td>
                    <td>{{mem_limit}} MB</td>
                </tr>
                {{/question_list}}
            </table>
        </div>
        <div class="footer">
            <!-- <hr> -->
            <h4>maole</h4>
        </div>
    </div>
</body>
<script>
    function performSearch() {
        const keyword = document.getElementById('searchKeyword').value;

        // 发送搜索请求
        fetch(`/search?keyword=${encodeURIComponent(keyword)}`)
            .then(response => response.text())
            .then(html => {
                // 使用DOMParser解析返回的HTML
                const parser = new DOMParser();
                const newDoc = parser.parseFromString(html, 'text/html');

                // 提取新的表格和搜索框
                const newTable = newDoc.querySelector('table');
                const newSearchBar = newDoc.querySelector('.search-bar');

                // 替换当前页面的元素
                document.querySelector('table').replaceWith(newTable);
                document.querySelector('.search-bar').replaceWith(newSearchBar);
            })
            .catch(error => console.error('搜索失败:', error));
    }
</script>

</html>